<template>
  <div v-if="visible" class="koule-dialog-overlay" @click.self="handleClose">
    <!-- 倒计时圆环 -->
    <div class="countdown-ring">
      <svg viewBox="0 0 70 70">
        <circle
          cx="35"
          cy="35"
          r="32"
          fill="none"
          stroke="#FFD700"
          stroke-width="3"
          :stroke-dasharray="dashArray"
          :stroke-dashoffset="dashOffset"
          stroke-linecap="round"
        />
      </svg>
      <div class="countdown-text">{{ countdown }}</div>
    </div>
    
    <!-- 主内容 -->
    <div class="koule-dialog">
      <!-- 发起人信息 -->
      <div class="dialog-header">
        <h2>扣了决策</h2>
      </div>
      
      <div class="initiator-info">
        <div class="player-avatar">{{ initiator?.avatar || '🤚' }}</div>
        <div class="player-name">{{ initiator?.name || '玩家' }}</div>
        <div class="action-text">发起扣了</div>
      </div>
      
      <div class="dialog-content">
        <div class="info-text">{{ infoText }}</div>
        
        <!-- 决策状态 -->
        <div class="decision-status">
          <div v-for="player in allPlayers" :key="player.id" class="player-decision">
            <div class="player-info">
              <div class="player-avatar-small">{{ player.avatar }}</div>
              <div class="player-name-small">{{ player.name }}</div>
            </div>
            <div 
              :class="[
                'decision-state',
                getDecision(player.id) === 'kou' ? 'decision-kou' : 
                getDecision(player.id) === 'xuan' ? 'decision-xuan' : 
                'decision-waiting'
              ]"
            >
              <span v-if="getDecision(player.id) === 'kou'">扣了</span>
              <span v-else-if="getDecision(player.id) === 'xuan'">宣</span>
              <span v-else>等待</span>
            </div>
          </div>
        </div>
        
        <!-- 风险提示 -->
        <div v-if="needDecision" class="risk-warning">
          <div class="warning-icon">⚠️</div>
          <div class="warning-text">
            选择"宣"需承担风险：输了要付2倍星光币
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div v-if="needDecision" class="dialog-buttons">
        <button class="btn-kou" @click="handleDecision('kou')">
          <div class="btn-icon">✋</div>
          <div>扣了</div>
          <div class="btn-desc">保守策略</div>
        </button>
        <button class="btn-xuan" @click="handleDecision('xuan')">
          <div class="btn-icon">🔥</div>
          <div>宣</div>
          <div class="btn-desc">风险收益</div>
        </button>
      </div>
      
      <!-- 等待提示 -->
      <div v-else class="waiting-info">
        <div class="waiting-text">{{ waitingText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useGameStore } from '../store/game';

const props = defineProps({
  visible: Boolean,
  initiator: Object,
  countdown: Number,
  decisions: Object,
  players: Array
});

const emit = defineEmits(['close']);

const gameStore = useGameStore();

// 计算属性
const currentPlayer = computed(() => gameStore.currentPlayer);
const needDecision = computed(() => {
  if (!props.visible || !currentPlayer.value) return false;
  // 如果是发起人或已经决策，不需要再决策
  return currentPlayer.value.id !== props.initiator?.id && 
         !props.decisions[currentPlayer.value.id];
});

const allPlayers = computed(() => {
  return props.players || [];
});

const dashArray = computed(() => {
  const radius = 32;
  return 2 * Math.PI * radius;
});

const dashOffset = computed(() => {
  const progress = props.countdown / 10; // 假设总时间是10秒
  return dashArray.value * (1 - progress);
});

const infoText = computed(() => {
  if (needDecision.value) {
    return '请选择是否同意重新发牌';
  } else if (currentPlayer.value?.id === props.initiator?.id) {
    return '等待其他玩家响应...';
  } else {
    return '你已做出选择，等待其他玩家...';
  }
});

// 方法
const getDecision = (playerId) => {
  return props.decisions[playerId] || null;
};

const handleDecision = (decision) => {
  gameStore.respondToKouLe(decision);
};

const handleClose = () => {
  // 只有在不需要决策时才能关闭
  if (!needDecision.value) {
    emit('close');
  }
};
</script>

<style scoped>
.koule-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.koule-dialog {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.95) 0%, rgba(160, 82, 45, 0.95) 100%);
  border: 2px solid #FFD700;
  border-radius: 20px;
  padding: 15px 20px;
  max-width: 320px;
  width: 90%;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 215, 0, 0.3);
  backdrop-filter: blur(10px);
  animation: toastSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  transform-origin: center top; /* 设置变换原点 */
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 倒计时圆环 */
.countdown-ring {
  margin-bottom: 20px; /* 与弹框保持间距 */
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.95) 0%, rgba(160, 82, 45, 0.95) 100%);
  border: 2px solid #FFD700;
  border-radius: 50%;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 215, 0, 0.3);
  backdrop-filter: blur(10px);
  z-index: 1001; /* 确保在弹框上方 */
  position: relative;
}

.countdown-ring svg {
  transform: rotate(-90deg);
  width: 80px;
  height: 80px;
}

.countdown-ring circle {
  transition: stroke-dashoffset 0.3s linear;
}

.countdown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 对话框内容 */
.dialog-header {
  margin-top: 25px;
  margin-bottom: 15px;
  text-align: center;
}

.dialog-header h2 {
  font-size: 20px;
  color: #FFD700;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.initiator-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.player-avatar {
  font-size: 32px;
  margin-bottom: 5px;
}

.player-name {
  font-size: 16px;
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.action-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.dialog-content {
  margin-bottom: 15px;
}

.info-text {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 决策状态 */
.decision-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.player-decision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-avatar-small {
  font-size: 24px;
}

.player-name-small {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.decision-state {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.decision-kou {
  color: #FFD700;
}

.decision-xuan {
  color: #43e97b;
}

.decision-waiting {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* 风险提示 */
.risk-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 10px;
  margin-bottom: 15px;
}

.warning-icon {
  font-size: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.6));
}

.warning-text {
  font-size: 12px;
  color: #FFD700;
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 操作按钮 */
.dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.dialog-buttons button {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.btn-kou {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 50%, #ef6c00 100%);
  color: white;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.btn-kou:hover {
  background: linear-gradient(135deg, #ff8f00 0%, #ff6f00 50%, #e65100 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.btn-xuan {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #2dd4bf 100%);
  color: white;
  border: 1px solid rgba(67, 233, 123, 0.3);
}

.btn-xuan:hover {
  background: linear-gradient(135deg, #3cd36f 0%, #2ce6c9 50%, #28c0ae 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
}

.btn-icon {
  font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.btn-desc {
  font-size: 10px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 等待提示 */
.waiting-info {
  text-align: center;
  padding: 15px;
}

.waiting-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 移动端适配 */
@media (max-width: 600px) {
  .koule-dialog {
    padding: 15px;
  }
  
  .countdown-ring {
    width: 70px;
    height: 70px;
    top: -35px;
  }
  
  .countdown-text {
    font-size: 20px;
  }
  
  .dialog-header h2 {
    font-size: 18px;
  }
  
  .dialog-buttons {
    flex-direction: column;
  }
  
  .dialog-buttons button {
    width: 100%;
  }
}
</style>